<template>
	<div class="loginPage">
		<div class="form" id="loginform">
			<h1>登录</h1>
			<form novalidate>
				<p class="userName">
					<label for="userName">用户名<span>*</span> </label>
					<input class="input" required type="text" id="userName" name="userName" v-model="userName"
						@blur="requiredName" />
					<span :class="{
						validation: true,
						req: true,
						errors: nameErrShow
					}" v-show="nameErrShow">
						请输入用户名</span>
				</p>
				<p class="password">
					<label for="password">密码<span>*</span></label>
					<input class="input" required type="password" id="password" v-model="password" name="password"
						@blur="requiredPass" />
					<span :class="{
						validation: true,
						req: true,
						errors: passErrShow
					}" v-show="passErrShow">
						请输入密码</span>
				</p>
				<p class="register">
					<a href="/register">前去注册</a>
				</p>
				<p class="login">
					<input type="button" value="登录" @click="setLogin" />
				</p>
			</form>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
import api from "../api/api";
const userName = ref('')
const password = ref('')
const nameErrShow = ref(false)
const passErrShow = ref(false)
const router = useRouter()
function requiredName() {
	nameErrShow.value = userName.value === '' ? true : false
}
function requiredPass() {
	passErrShow.value = password.value === '' ? true : false
}

function setLogin() {
	api.post("/admin/adminLogin",{
		userName: userName.value,
		password: password.value
	}).then(res => {
		sessionStorage.setItem('userName', userName.value)
		sessionStorage.setItem('token',`Bearer ${res.data.token}`)
		api.get("/users/userInfo").then((res) => {
				sessionStorage.setItem('avatarUrl', res.data.data.userAvatar)
				router.push('/')
			})
		})	
	.catch(err => {
			AMessage.error(err)
	})
}
</script>

<style lang="scss" scoped>
$primary: #fad0c4;
$complementary: #5a3b5d;
$lightsep: rgb(220, 220, 220);

// 将整个页面扩展到整个屏幕 不局限于双容器
.loginPage {
	position: absolute;
	width: 100vw;
	height: 100vh;
	left: 0;
	background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);

	.form {
		margin-top: 3rem;
	}
}

/* 创建抖动动画 */
@keyframes shakeMe {

	0%,
	100% {
		transform: translateX(0);
	}

	20%,
	60% {
		transform: translateX(-10px);
	}

	40%,
	80% {
		transform: translateX(10px);
	}
}

/* 应用动画 */
.errors {
	animation-name: shakeMe;
	animation-duration: 0.5s;
}

body {
	background: #fedc2a;
	font-family: 'Raleway', sans-serif;
	background-size: cover;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.form {
	background: #fff;
	border: 1px solid #d9d9d9;
	color: rgb(99, 99, 99);
	width: 300px;
	border-radius: 4px;
	margin: 0 auto;
	padding: 20px 30px;

	h1 {
		text-transform: uppercase;
		font-weight: normal;
		font-size: 1.5em;
		text-align: center;
		margin: 0;
		padding: 10px 0px;
		border-bottom: 1px solid $lightsep;
	}
}

form p {
	position: relative;
	margin: 25px 0 10px 0;
}

// 设置注册按钮样式
.register {
	text-align: right;
	cursor: pointer;
}

.register>a {
	text-decoration: none;
	color: black;
}

.register>a:hover {
	color: #b54300;
}

.userName label,
.password label,
.input {
	display: block;
	width: 100%;
	padding-bottom: 10px;
	box-sizing: border-box;
}

/* 按钮样式*/

[type='button'] {
	display: block;
	color: $complementary;
	font-weight: bold;
	border-radius: 2px;
	background: $primary;
	box-shadow: 5px 5px 0 0 $primary, inset 4px 4px 0 0 white;
	border: 2px solid $complementary;
	border-radius: 3px;
	padding: 10px;
	width: 100%;
	margin: 0 auto;
	transition: background 0.3s;

	// 选中触发 显示阴影
	&:hover {
		background: white;
		box-shadow: 5px 5px 0 0 $primary, inset 4px 4px 0 0 white;
	}

	// 聚焦或被选中时触发
	&:active,
	&:focus {
		position: relative;
		top: 1px;
		outline: none;
		background: darken($primary, 10%);
	}
}

[type='password'],
[name='userName'] {
	padding: 20px;

	&:focus {
		outline: none;
	}
}

/* input样式 */

.input {
	font-size: 0.85em;
	background: rgb(255, 255, 255);
	border: 1px solid $lightsep;
	height: 40px;
	transition: border-color 0.4s, box-shadow 1s;
}

// 被选中或聚焦时 添加上边框与阴影效果
.input:active,
.input:focus {
	border: 1px solid $complementary;
	box-shadow: 4px 4px 0 #c7a9cd;
}

// 当检测内容不为空时隐藏错误信息
.input:valid~.validation {
	opacity: 0;
	transition: opacity 0.5s;
}

// 错误信息的css

.validation {
	display: block;
	font-size: 0.8em;
	padding-top: 0.5em;
	position: absolute;
	right: 0;
	opacity: 1;
	transition: opacity 1s;
}

.validation.req {
	color: #b54300;
}

.validation.error {
	color: rgb(183, 0, 76);
}
</style>
